var CANVAS_WIDTH = 1000;//画布宽度
var CANVAS_HEIGHT = 1000;

const heart_colors = ["#00FFFF","#A52A2A","#7FFF00","#DC143C","#00FFFF","#FF00FF","#FFD700","#4B0082"];
const point_colors = ["#F0FFFF","#F5F5F5","#AFEEEE","#FFFFE0","#FFFAFA","#000000","#FFF0F5","#E8E8E8", "#00FFFF","#A52A2A","#7FFF00","#DC143C","#00FFFF","#FF00FF","#FFD700","#4B0082"];

window.onload = function(){
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    CANVAS_WIDTH = document.documentElement.clientWidth;
    canvas.width = CANVAS_WIDTH;

    CANVAS_HEIGHT = document.documentElement.clientHeight;
    canvas.height = CANVAS_HEIGHT;
    canvas.height = CANVAS_HEIGHT;

    setInterval( function(){
        render( context );
    }, 300 );
}

function render( context ){
    //刷新画布
    context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT );

    // 绘制随机心
    var num = Math.random() * 100;
    for (var i = 0; i < num; i++) {
        var scale = Math.random() * 1;
        var x_padding = Math.random() * CANVAS_WIDTH;
        var y_padding = Math.random() * CANVAS_HEIGHT;
        draw_heart(context, scale, x_padding, y_padding);
    }

    // 绘制主心
    var xp = CANVAS_WIDTH / 2;
    var yp = CANVAS_HEIGHT / 2;

    var scale = 20 * (1 + Math.random()/4);
    var types = [
        {count: 1000,   detal: 4,   rand_type: "unin",  abs: false},  // 散落到外
        {count: 10000, detal: 0.7, rand_type: "unin",  abs: false},  // 勾勒轮廓
        {count: 5000, detal: 0.9,   rand_type: "gauss", abs: true},   // 构造内嵌
        {count: 500, detal: 2,   rand_type: "gauss", abs: true},    // 散落到内
        {count: 5000, detal: 2,   rand_type: "gauss", abs: true},    // 散落到内
        {count: 2000, detal: 4,   rand_type: "gauss", abs: true},    // 散落到内
        
    ];

    for (var j = 0; j < types.length; j++) {
        var points = gen_heart_poin(types[j].count, types[j].detal, types[j].rand_type, types[j].abs);
        for (var i = 0; i < points.length; i++) {
            var x = points[i].x * scale + xp;
            var y = points[i].y * scale + yp;
            draw_point(context, x , y , 2);
        }
    }
}

// detal 最大值是5 最小值是0
function gen_heart_poin(count, detal, rand_type, abs) {
    var points = [];
    for (var i = -6; i < 6 ; i += 12 / count) {
        var x = (16 * Math.pow(Math.sin(i), 3));
        var y = (13 * Math.cos(i) - 5 * Math.cos(2*i) - 2 * Math.cos(3 * i) - Math.cos(4 * i)) * -1;
        
        if (rand_type == "unin") {
            // 均匀分布
            var d1 = (Math.random() - 0.5) * detal;
            var d2 = (Math.random() - 0.5) * detal;
        } else {
            // 正态分布
            var d1 = normalRandom(0, 1) * detal;
            var d2 = normalRandom(0, 1) * detal;
        }

        if (abs) {
            d1 = Math.abs(d1);
            d2 = Math.abs(d2);
        }
        
        if (x > 0) {
            x = x - d1;
        } else {
            x = x + d1;
        }

        if (y > 0) {
            y = y - d2;
        } else {
            y = y + d2;
        }

        points.push({x: x, y: y});
    }
    console.log(points);
    return points;
}

function draw_heart(context, scale, x_padding, y_padding) {
    context.fillStyle = heart_colors[Math.ceil(Math.random() * heart_colors.length)];
    context.beginPath();
    for (var i = -6; i < 6 ; i += 0.01) {
        var x = (16 * Math.pow(Math.sin(i), 3))*scale;
        var y = (13 * Math.cos(i) - 5 * Math.cos(2*i) - 2 * Math.cos(3 * i) - Math.cos(4 * i)) * -1 * scale;
        context.lineTo(x + x_padding, y + y_padding) ;
    }
    context.fill();
}

function draw_point(context, x, y, redius) {
    context.fillStyle = point_colors[Math.ceil(Math.random() * point_colors.length)];
    context.beginPath();
    context.arc(x - redius/2, y, redius/2, redius, 2*Math.PI, false);
    context.fill();
}

function normalRandom(mean, std) {
    let u = 0.0, v = 0.0, w = 0.0, c = 0.0;
    do {
        //获得两个（-1,1）的独立随机变量
        u = Math.random() * 2 - 1.0;
        v = Math.random() * 2 - 1.0;
        w = u * u + v * v;
    } while (w == 0.0 || w >= 1.0)
    //Box-Muller转换
    c = Math.sqrt((-2 * Math.log(w)) / w);
    let normal = mean + (u * c) * std;
    return normal;
}
